<template>
  <div>
    <van-search
      v-model="value"
      placeholder="请输入搜索关键词"
      @search="onSearch"
    />
    <h5 class="w1">历史记录：</h5>
    <van-button class="w1" type="primary" @click="del" size="mini"
      >删除</van-button
    >
    <van-tag
      class="w1"
      v-for="(item, index) in history"
      :key="index"
      v-show="index < 5"
      type="danger"
      >{{ item }}</van-tag
    >
  </div>
</template>
<script>
import { Dialog } from "vant";
export default {
  data() {
    return {
      value: "",
      history: JSON.parse(localStorage.getItem("history")) || [],
    };
  },
  methods: {
    onSearch() {
      this.history.unshift(this.value);
      localStorage.setItem("history", JSON.stringify(this.history));
      this.$router.push({ path: "/list", query: { value: this.value } });
    },
    del() {
      Dialog.confirm({
        message: "确定删除吗？",
      })
        .then(() => {
          this.history = [];
          localStorage.removeItem("history");
        })
        .catch(() => {});
    },
  },
};
</script>
<style scoped>
.w1 {
  margin-left: 10px;
}
</style>